<template>
  <div id="home-container">
    <!-- 轮播图 -->
    <div id="swiper" class="container-fuild">
      <div class="swiper-container banner-swiper">
        <div class="swiper-wrapper">
          <div class="swiper-slide" v-for="(item,index) in swiperList" :key="index">
            <img class="swiper-lazy" :data-src="item.img" alt="轮播图">
            <div class="swiper-lazy-preloader"></div>
            <div class="swiper-slide-title">
                <h1>{{item.title}}</h1>
                <p v-html="item.content"></p>
            </div>
          </div>
        </div>
        <!-- 如果需要分页器 -->
        <div class="swiper-pagination"></div>

        <!-- 如果需要导航按钮 -->
        <div class="swiper-button-prev"></div>
        <div class="swiper-button-next"></div>
      </div>
    </div>
    <!-- 最新有偿征集债务人信息 -->
    <div class="container middle">
      <h3 style="text-align: center">- 最新<span style="color: #3B8FEE">有偿征集债务人信息</span> -</h3>
      <el-form :inline="true" :model="formInline" size="mini" class="form-inline">
        <el-form-item>
          <el-input v-model="formInline.user" placeholder="请输入债权名称、欠债金额等"></el-input>
        </el-form-item>
        <el-form-item>
          <el-select v-model="formInline.region" placeholder="区域">
            <el-option label="区域一" value="shanghai"></el-option>
            <el-option label="区域二" value="beijing"></el-option>
          </el-select>
        </el-form-item>
        <el-form-item>
          <el-select v-model="formInline.type" placeholder="类型">
            <el-option label="区域一" value="shanghai"></el-option>
            <el-option label="区域二" value="beijing"></el-option>
          </el-select>
        </el-form-item>
        <el-form-item>
          <el-select v-model="formInline.status" placeholder="状态">
            <el-option label="区域一" value="shanghai"></el-option>
            <el-option label="区域二" value="beijing"></el-option>
          </el-select>
        </el-form-item>
        <el-form-item>
          <el-button type="primary" @click="onSubmit">查询</el-button>
        </el-form-item>
      </el-form>
      <div v-for="(it, idx) in creditorList" :key="it.id" class="normal-item" :class="{'item-one' : !idx}">
        <div class="line-one">
          <span>主债务人姓名/机构名称:{{it.name}}</span>
          <span>债权金额:{{it.status}}</span>
          <span>发布时间:{{it.createTime}}</span>
          <span @click="viewDetail(it.id)">查看详情</span>
        </div>
        <div class="line-two"><span>债务人所在地址：{{it.address}}</span></div>
      </div>
      <!-- <List dateList="creditorList" key="creditorList"></List> -->
      <div style="text-align: center;margin-top:30px;"><el-button type="primary" round @click="viewMore('case')">查看更多<i class="el-icon-arrow-right el-icon--right"></i></el-button></div>
    </div>

    <!-- 最新债权转让 -->
    <div class="container middle">
      <h3 style="text-align: center">- 最新<span style="color: #3B8FEE">债权转让</span> -</h3>
      <div v-for="(it, idx) in creditorList" :key="it.id" class="normal-item" :class="{'item-one' : !idx}">
        <div class="line-one">
          <span>主债务人姓名/机构名称:{{it.name}}</span>
          <span>债权金额:{{it.status}}</span>
          <span>转让金额:{{it.money}}</span>
          <span @click="viewDetail(it.id)">查看详情</span>
        </div>
        <div class="line-two">
          <span>债权ID:{{it.id}}</span>
          <span>发布时间:{{it.createTime}}</span>
          <span>债务人所在地址：{{it.address}}</span>
        </div>
      </div>
      <!-- <List dateList="changeList" key="changeList"></List> -->
      <div style="text-align: center;margin-top:30px;"><el-button type="primary" round @click="viewMore('case')">查看更多<i class="el-icon-arrow-right el-icon--right"></i></el-button></div>
    </div>
    <!-- 案源委托信息 -->
    <div class="container middle">
      <h3 style="text-align: center">- 案源<span style="color: #3B8FEE">委托信息</span> -</h3>
      <div v-for="(it, idx) in caseList" :key="it.id" class="normal-item" :class="{'item-one' : !idx}">
        <div class="line-one">
          <span>求助信息的事由:{{it.reason}}</span>
          <span>求助信息的诉讼内容:{{it.content}}</span>
          <span>求助信息的结束标准:{{it.endSign}}</span>
          <span @click="viewDetail(it.id)">查看详情</span>
        </div>
        <div class="line-two line-t">
          <span>求助信息的执行地区:{{it.address}}</span>
          <span>求助信息的代理价格:{{it.money}}</span>
          <span>信息有效时间:{{it.validTime}}</span>
        </div>
        <div class="line-three">
          <span>案源ID:{{it.id}}</span>
          <span>发布时间:{{it.createTime}}</span>
        </div>
      </div>
      <!-- <List dateList="caseList" key="caseList"></List> -->
      <div style="text-align: center;margin-top:30px;"><el-button type="primary" round @click="viewMore('case')">查看更多<i class="el-icon-arrow-right el-icon--right"></i></el-button></div>
    </div>
    <div class="container middle">
      <h3 style="text-align: center">- 交流<span style="color: #3B8FEE">咨询信息</span> -</h3>
      <div v-for="(it, idx) in messageList" :key="it.id" class="normal-item" :class="{'item-one' : !idx}">
        <div class="line-one">
          <span>{{it.question}}</span>
          <span @click="viewDetail(it.id)">查看详情</span>
        </div>
        <div class="line-two">
          <span>等{{it.people.length}}人参与讨论 | {{it.updateTime}} | {{it.belong}}</span>
        </div>
      </div>
      <!-- <List dateList="messageList" key="messageList"></List> -->
      <div style="text-align: center;margin-top:30px;"><el-button type="primary" round @click="viewMore('ask')">查看更多<i class="el-icon-arrow-right el-icon--right"></i></el-button></div>
    </div>
    <!-- 律师服务 -->
    <div class="container middle" style="margin-top: 40px;">
      <div class="title">
        <h4 class="left">律师服务</h4>
        <div class="line"></div>
        <div><el-button round size="mini" @click="viewMore('laywerServic')">在线咨询</el-button></div>
      </div>
      <div class="laywer-container">
        <div v-for="it in laywerList" :key="it.id" class="laywer-item">
          <img :src="it.img" alt="">
          <div>
            <span>{{it.name}}</span>
            <img src="@/assets/img/plug.png" alt="">
          </div>
        </div>
      </div>
    </div>

    <!-- 公告咨询 -->
    <div class="container middle">
      <div class="title">
        <h4 class="left">公告咨询</h4>
        <div class="line"></div>
        <div><el-button round size="mini" @click="forMore('notice')">更多新闻</el-button></div>
      </div>
      <div class="notice-container">

      </div>
    </div>

    <!-- 关于我们 -->
    <div class="container middle">
      <div class="about-container">
        <div class="">
          <img src="" alt="">
          <h3>关于我们 <span style="color: #3B8FEE;">债权流转</span>平台</h3>
          <p>债权债务专业处理平台，聚集大量执业经验丰富的专职律师</p>
        </div>
        <div>
          <p>债权流转平台是一家线上委托线下服务的法律服务机构。</p>
          <p>本机构实力雄厚，拥有全国一万多位经验丰富的加盟律师，为全国各地的客户提供一对一专业服务，主要针对企业债 务回款、个人债务回款、</p>
        </div>
        <div class="see-more">
          <div class="item">
            <p>公司简介</p>
            <div>
              <span>查看详情</span>
              <img src="@/assets/img/ball.png" alt="">
            </div>
          </div>
          <div class="item">
            <p>联系方式</p>
            <div>
              <span>查看详情</span>
              <img src="@/assets/img/ball.png" alt="">
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>
<script>
import Swiper from "swiper";
import List from '../components/List'

import { WOW } from 'wowjs';
export default {
  components: {List},
  name: "Home",
  data() {
    return {
      formInline: {
        user: '',
        region: '',
        type: '',
        status: ''
      },
      swiperList: [
        {
          img: require("@/assets/img/banner1.png"),
          path: "",
          title: '专注于解决法律争议',
          content: '债权债务<span style="color: #409EFF;">专业处理平台</span>，聚集大量执业丰富的<span style="color: #409EFF;">专职律师</span>',
        }
      ],
      creditorList: [{
        id: '202108',
        name: '吴一凡',
        status: '待评估',
        createTime: '2021-08-31',
        address: '北京市海淀区中关村大厦'
      },{
        id: '202109',
        name: '吴特凡',
        status: '待评估',
        createTime: '2021-08-30',
        address: '北京市海淀区中关村大厦'
      }],
      changeList: [{
        id: '202108',
        name: '吴一凡',
        status: '待评估',
        money: '1000',
        createTime: '2021-08-31',
        address: '北京市海淀区中关村大厦'
      }],
      caseList:[{
        id: '202108',
        reason: '',
        content: '',
        endSign: '',
        validTime: '',
        name: '吴一凡',
        status: '待评估',
        money: '1000',
        createTime: '2021-08-31',
        address: '北京市海淀区中关村大厦'
      },{
        id: '202109',
        reason: '',
        content: '',
        endSign: '',
        validTime: '',
        name: '吴凡',
        status: '待评估',
        money: '2000',
        createTime: '2021-09-01',
        address: '北京市海淀区中关村大厦'
      },{
        id: '202101',
        reason: '',
        content: '',
        endSign: '',
        validTime: '',
        name: '吴一',
        status: '待评估',
        money: '2200',
        createTime: '2021-09-02',
        address: '北京市海淀区中关村大厦'
      }],
      messageList:[{
        question: '建筑物区分所有权相邻关系纠纷的诉讼流程是什么？',
        people:[
          'jack','rose','mark'
        ],
        updateTime: '2021年8月30日',
        belong: '交流问答',
      },{
        question: '行政案件如何执行？',
        people:[
          'jack','rose','mark'
        ],
        updateTime: '2021年8月28日',
        belong: '交流问答',
      },{
        question: '行政案件如何执行？',
        people:[
          'jack','rose','mark'
        ],
        updateTime: '2021年9月1日',
        belong: '交流问答',
      },{
        question: '行政案件如何执行？',
        people:[
          'jack','rose','mark'
        ],
        updateTime: '2021年9月2日',
        belong: '交流问答',
      }],
      laywerList: [{
        img: require("@/assets/img/laywer.png"),
        id: '111',
        name: '李舒维律师'
      },{
        img: require("@/assets/img/laywer.png"),
        id: '112',
        name: '李舒维律师'
      },{
        img: require("@/assets/img/laywer.png"),
        id: '113',
        name: '李舒维律师'
      },{
        img: require("@/assets/img/laywer.png"),
        id: '114',
        name: '李舒维律师'
      },{
        img: require("@/assets/img/laywer.png"),
        id: '115',
        name: '李舒维律师'
      }],
      noticeList:[{

      }]
    };
  },
  mounted() {
    /* banner-swiper */
    new Swiper(".banner-swiper", {
      loop: true, // 循环模式选项
      effect: 'fade',
      //自动播放
      autoplay: {
        delay: 3000,
        stopOnLastSlide: false,
        disableOnInteraction: false
      },
      // 如果需要分页器
      pagination: {
        el: ".swiper-pagination",
        clickable: true
      },
      // 如果需要前进后退按钮
      navigation: {
        nextEl: ".swiper-button-next",
        prevEl: ".swiper-button-prev"
      },
      // 延迟加载
      lazy: {
        loadPrevNext: true
      },
      observer: true, //修改swiper自己或子元素时，自动初始化swiper
      observeParents: true //修改swiper的父元素时，自动初始化swiper
    });
    /* customer-swiper */
    new Swiper(".customer-swiper", {
      loop: true, // 循环模式选项
      slidesPerView: 3,
      //自动播放
      autoplay: {
        delay: 3000,
        stopOnLastSlide: false,
        disableOnInteraction: false
      },
      // 如果需要前进后退按钮
      navigation: {
        nextEl: ".swiper-button-next",
        prevEl: ".swiper-button-prev"
      },
      observer: true, //修改swiper自己或子元素时，自动初始化swiper
      observeParents: true //修改swiper的父元素时，自动初始化swiper
    });
    /* wowjs动画 */
    var wow = new WOW({
      boxClass: 'wow',
      animateClass: 'animated',
      offset: 0,
      mobile: true,
      live: true
    })
    wow.init();

    this.$util.post('api/index/getIndex',{}).then(res=>{
      console.log(res)
    })
  },
  methods: {
    viewMore(name) {
      this.$router.push({name: `${name}`})
    },
    forHelp(){

    },
    forMore() {

    },
    onSubmit() {
        console.log('submit!');
    }
  }
};
</script>
<style scoped>
/* 整体盒子 */
#home-container {
  width: 100%;
}

/* 轮播图 */
#swiper {
  height: 600px;
}
#swiper .banner-swiper {
  width: 100%;
  height: 100%;
}
#swiper .banner-swiper .swiper-slide img {
  width: 100%;
  height: 100%;
}
#swiper .banner-swiper .swiper-slide{
  position: relative;
}
#swiper .banner-swiper .swiper-slide-title {
  position: absolute;
  top: 0;
  left: 0;
  z-index: 999999999;
  width: 100%;
  height: 100%;
  color: #fff;
  background: rgba(51, 51, 51, 0.534);
  text-align: center;
  line-height: 80px;
}
#swiper .banner-swiper .swiper-slide-title > h1{
  font-size: 50px;
  margin-top: 12%;
}
#swiper .banner-swiper .swiper-slide-title > p{
  font-size: 20px;
  margin-top: 1%;
  font-weight: 700;
}
.middle h3 {
  margin: 40px 0;
}
.middle .title {
  display: flex;
  justify-content: space-between;
  align-items: center;
}
.middle .title .line {
  content: '-';
  width: calc(100% - 160px);
  height: 1px;
  background: #ccc;
}
.laywer-container {
  display: flex;
  flex-wrap: wrap;
  margin-top: 20px;
}
.laywer-container .laywer-item {
  width: 21.5%;
  margin-right: 3.5%;
  border: 1px solid #ccc;
  padding: 10px;
  margin-bottom: 20px;
}
.laywer-container .laywer-item img {
  border-bottom: 1px solid #ccc;
  width: 100%;
}
.laywer-container .laywer-item div {
  display: flex;
  justify-content: space-between;
  padding-top: 10px;
}
.laywer-container .laywer-item div img {
  width: 20px;
  height: 20px;
  border: none;
}
.about-container {
  padding-bottom: 30px;
  background: url("../assets/img/banner1.png");
  background-size: 100%;
  padding: 30px 40px;
}
.about-container .see-more {
  display: flex;
  justify-content: flex-start;
  margin-top: 50px;
}
.about-container .see-more .item {
  border: 1px solid #CADEF5;
  padding: 20px;
  min-width: 250px;
  margin-right: 20px;
}

.about-container .see-more .item div {
  display: flex;
  justify-content: space-between;
}
.about-container .see-more .item div img {
  width: 20px;
  height: 20px;
}

.normal-item {
  border: 2px solid #CADEF5;
  border-radius: 4px;
  padding: 20px 10px;
  margin-top: 30px;
}
.item-one {
  color: #fff;
  background: #3B8FEE;
}
.line-one {
  display: flex;
  justify-content: space-between;
  border-bottom: 1px solid #CADEF5;
  padding-bottom: 20px;
}
.line-two {
  padding-top: 20px;
  display: flex;
  justify-content: space-between;
}
.line-t {
  padding-bottom: 20px;
}
.line-three {
  border-top: 1px solid #CADEF5;
  padding-top: 20px;
}

/* 媒体查询（手机） */
@media screen and (max-width: 768px) {
  #swiper {
    height: 200px;
  }
}

/* 媒体查询（平板） */
@media screen and (min-width: 768px) and (max-width: 996px) {
  #swiper {
    height: 400px;
  }
}
</style>

